<template>
  <div class="leader-wrap" v-loading="loading">
    <div v-for="data of matterProcessStatisticsList" :key="data.taskType">
      <h1 class="leader-wrap-title flex-row-between">
        {{ data.title }}
        <img
          class="leader-wrap-title-line"
          src="../images/leader-assign-line.png"
        />
      </h1>
      <div class="leader-wrap-content">
        <div
          class="leader-wrap-content-total flex-row-between"
          @click="handleClick(data)"
        >
          <p class="leader-wrap-content-total-left flex-row-center">
            <img
              class="leader-wrap-content-total-left-img"
              src="@screen/images/leader-total.png"
            />
            办件总数
          </p>
          <p class="leader-wrap-content-total-num">
            {{ data.totalNum }}
          </p>
        </div>
        <div class="leader-wrap-content-kind flex-row-between flex-wrap">
          <div
            class="leader-wrap-content-kind-item flex-row-between item-normal"
            @click="handleClick({ ...data, matterStatus: 1 })"
          >
            <p class="flex-row-center">
              <img
                class="leader-assign-icon"
                src="@screen/images/leader-assign-normal.png"
                alt=""
              />
              <span>正常推进</span>
            </p>
            <p class="cur-num">{{ data.normalNum }}</p>
          </div>

          <div
            class="leader-wrap-content-kind-item flex-row-between item-finished"
            @click="handleClick({ ...data, matterStatus: 3 })"
          >
            <p class="flex-row-center">
              <img
                class="leader-assign-icon"
                src="@screen/images/leader-assign-finished.png"
                alt=""
              />
              已完成
            </p>
            <p class="cur-num">{{ data.finishedNum }}</p>
          </div>

          <div
            class="leader-wrap-content-kind-item flex-row-between item-timeout"
            @click="handleClick({ ...data, matterStatus: 2 })"
          >
            <p class="flex-row-center">
              <img
                class="leader-assign-icon"
                src="@screen/images/leader-assign-timeout.png"
                alt=""
              />
              已超时
            </p>
            <p class="cur-num">{{ data.timeoutNum }}</p>
          </div>

          <div
            class="leader-wrap-content-kind-item flex-row-between item-not"
            @click="handleClick({ ...data, matterStatus: 4 })"
          >
            <p class="flex-row-center">
              <img
                class="leader-assign-icon"
                src="@screen/images/leader-assign-not.png"
                alt=""
              />
              未签收
            </p>
            <p class="cur-num">{{ data.unSignedMatterNum }}</p>
          </div>
        </div>
      </div>
    </div>
    <DetailDialog v-if="show" :options="optionItem" @close="close" />
  </div>
</template>
<script setup lang="ts">
import { queryMatterProcessStatisticsByType } from '@/api/home'
import useFetch from '@/hooks/useFetch'
import { ref } from 'vue'
import DetailDialog from './DetailDialog.vue'
import useShowDialog from '@screen/hooks/useShowDialog'
import { generatePageParams } from '../utils'

const { show, close, handleClick, optionItem } = useShowDialog()
const matterProcessStatisticsList = ref([
  {
    title: '书记交办',
    totalNum: 0,
    normalNum: 0,
    finishedNum: 0,
    timeoutNum: 0,
    unSignedMatterNum: 0,
    taskType: 'sjjb',
  },
  {
    title: '区长交办',
    totalNum: 0,
    normalNum: 0,
    finishedNum: 0,
    timeoutNum: 0,
    unSignedMatterNum: 0,
    taskType: 'qzjb',
  },
  {
    title: '区委交办',
    totalNum: 0,
    unSignedMatterNum: 0,
    normalNum: 0,
    finishedNum: 0,
    timeoutNum: 0,
    taskType: 'qwjb',
  },
  {
    title: '区府交办',
    totalNum: 0,
    normalNum: 0,
    finishedNum: 0,
    timeoutNum: 0,
    unSignedMatterNum: 0,
    taskType: 'qfjb',
  },
])

const { loading, onFetchSuccess } = useFetch(
  queryMatterProcessStatisticsByType,
  generatePageParams(),
  true,
)

onFetchSuccess((data) => {
  if (data?.length) {
    let defaultData = matterProcessStatisticsList.value
    defaultData = defaultData.map((origin) => {
      const target = data.find(
        (newItem) => newItem.taskType === origin.taskType,
      )
      if (target) {
        return {
          ...origin,
          totalNum: target.matterTotalNum,
          normalNum: target.proceedNormallyMatterNum,
          finishedNum: target.completedMatterNum,
          timeoutNum: target.timeOutMatterNum,
          unSignedMatterNum: target.unSignedMatterNum,
        }
      }
      return origin
    })
    matterProcessStatisticsList.value = defaultData
  }
})
</script>

<style lang="scss" scoped>
.leader-wrap {
  padding: 0 vw(10) vw(16);
  &-title {
    margin-top: vh(20);
    font-size: vw(16);
    font-weight: 700;
    height: vh(24);
    line-height: vh(24);

    &-line {
      width: vw(239);
    }
  }

  &-content {
    margin: vh(16) 0 vh(10);
    cursor: pointer;
    &-total {
      height: vh(56);
      padding: 0 vw(20);
      text-align: center;
      background: url(../images/leader-bg.png) no-repeat center / cover;

      &-left {
        font-size: vw(16);
        &-img {
          width: vw(34.72);
          height: vw(40);
          margin-right: vw(19.28);
        }
      }
      &:hover {
        color: var(--big-screent-hover-color);
        transform: scale(1.1);
        transition: all 0.3s ease-in-out;
      }

      &-num {
        font-size: vw(24);
        font-weight: 700;
        font-family: 'DDin', sans-serif;
      }
    }

    .leader-assign-icon {
      width: vw(16);
      margin-right: vw(8);
    }

    &-kind {
      height: 100%;
      &-item {
        width: vw(152);
        height: vh(36);
        padding: 0 vw(20) 0 vw(12);
        margin-top: vh(12);
        border-radius: vw(4);
        background: linear-gradient(
          165.2deg,
          rgba(50, 116, 191, 0.1) 0%,
          rgba(124, 143, 161, 0.1) 100%
        );

        &:hover {
          color: var(--big-screent-hover-color);
          transform: scale(1.1);
          transition: all 0.3s ease-in-out;
        }
      }

      .cur-num {
        font-size: vw(18);
        font-weight: 700;
        font-family: 'DDin', sans-serif;
      }

      &-item:hover .cur-num {
        background: var(--big-screent-hover-color);
        font-size: vw(18);
        font-weight: 700;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        color: transparent;
      }
    }
  }
}
</style>
